<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
          <el-row class="search-input">
            <el-form-item label="保障名称：">
            <el-input v-model="filters.guaranteeName" clearable placeholder="保障名称" />
          </el-form-item>
          </el-row>
        <!--    查询     -->
         <el-row class="search-button">
            <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-add" :label="$t('action.add')" type="primary" @click="handleAdd"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
          </el-form-item>
         </el-row>
      </el-form>
    </div>

    <!--表格内容栏-->
    <cy-table
      :height="300"
      :highlightCurrentRow="true"
      :content="pageResult"
      :totalSize="totalSize"
      v-loading="lodaing"
      :columns="filterColumns"
      :showDeleteOperation="true"
      :showSelection="false"
      :showBatchDelete="false"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      ref="CyTable"></cy-table>

    <!--新增编辑界面-->
    <el-dialog :title="operation ? '保障详情新增' : '保障详情编辑'" top="7vh" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="95px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
        <el-form-item label="保障名称：" prop="guaranteeName">
          <el-input v-model="dataForm.guaranteeName" auto-complete="off" label="请输入保障名称"></el-input>
        </el-form-item>
        <el-form-item label="是否必填" prop="required">
          <el-radio v-model="dataForm.required" :label="1">必填</el-radio>
          <el-radio v-model="dataForm.required" :label="2">非必填</el-radio>
        </el-form-item>
        <el-form-item label="保障说明：" prop="guaranteeExplain">
          <el-input v-model="dataForm.guaranteeExplain" auto-complete="off" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="保障详情：" prop="contentPlain">
          <el-input v-model="dataForm.contentPlain" auto-complete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{ $t("action.cancel") }}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{ $t("action.submit") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  export default {
    components: {
      KtButton,
      CyTable,
    },
    data() {
      return {
        lodaing:true,
        size: "small",
        filters: {
          guaranteeName: '',
        },
        totalSize: 0,
        pageResult: [],
        options: [],
        filterColumns: [
          {prop: "guaranteeName", label: "保障名称", minWidth: 120},
          {prop: "createTime", label: "创建时间", minWidth: 120,},
          {prop: "index", label: "排序", minWidth: 120,},
          {prop: "required", label: "是否必填", minWidth: 120,formatter: this.payStatusFormat}, 
        ],
        pageRequest: { pageNum: 1, pageSize: 10 },
        editLoading: false,
        operation: false,
        dialogVisible: false, // 新增编辑界面是否显示
        dataFormRules: {
          merchantId: [{required: true, message: "请输入商家名称", trigger: "blur"}],
          guaranteeName: [{required: true, message: "请输入保障名称", trigger: "blur"}],
          required: [{required: true, message: " ", trigger: "change"}],
          guaranteeExplain: [{required: true, message: "请输入保障说明", trigger: "blur"}],
       },
        dataForm: {
          id: "",
          guaranteeName: "",
          contentPlain: "",
          guaranteeExplain: "",
          required: 1
        },
      };
    },
    methods: {
      // 获取分页数据
      findPage: function(params) {
        let this_=this
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.queryProductGuaranteeList(this_.filters, function (res) {
          this_.pageResult = res.data.rows;
          this_.totalSize = Number(res.data.total);
          for(let i = 0;i<this_.pageResult.length;i++){
            this_.pageResult[i].index = i+1;
          }
          this_.lodaing=false
        });
      },
      // 删除
      handleDelete: function (row) {
        let this_ = this;
        let params = {};
        params.id = row.params[0].id;
        this.utils.request.deleteProductGuarantee(params, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.findPage(null);
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        });

      },
      
      payStatusFormat: function (row, column, cellValue, index) {
        if (cellValue == 1 || cellValue == '1' ) {
          return "必须";
        } else if (cellValue == 2 || cellValue == '2') {
          return "非必须";
        }
      },
      // 显示编辑界面
      handleEdit: function(params) {
        let this_ = this;
        this_.dialogVisible = true;
        this_.operation = false;
        this_.dataForm = Object.assign({}, params.row);
        if (this.$refs["dataForm"]) {
          this.$refs["dataForm"].resetFields();
        }
      },
      handleAdd: function() {
        let this_ = this;
        this_.dataForm = {};
        this_.dialogVisible = true;
        this_.operation = true;
        if (this.$refs["dataForm"]) {
          this.$refs["dataForm"].resetFields();
        } 
        this_.dataForm = {
          required: 1
        };
      },
      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let this_ = this;
              let params = {};
              if (this_.operation) {
                params = Object.assign({}, this.dataForm)
                this.utils.request.addProductGuaranteefunction(params, function(res) {
                  if (res.code == "0000") {
                    this_.dataForm = {};
                    this_.findPage(null);
                    this_.dialogVisible = false;
                    this_.$message({ message: "操作成功", type: "success" });
                  } else {
                    this_.$message({
                      message: "操作失败, " + res.msg,
                      type: "error"
                    });
                  }
                });
              } else {
                params = Object.assign({}, this.dataForm);
                this.utils.request.updateProductGuarantee(params, function(res) {
                  if (res.code == "0000") {
                    this_.dataForm = {};
                    this_.findPage(null);
                    this_.dialogVisible = false;
                    this_.$message({ message: "操作成功", type: "success" });
                  } else {
                    this_.$message({
                      message: "操作失败, " + res.msg,
                      type: "error"
                    });
                  }
                });
              }
            });
          }
        });
      },
      // 重置
      resetForm(formName) {
        this.filters = {};
        this.findPage();
      },
    },
    mounted() {

    }

  };
</script>

<style scoped lang='scss'>
  /deep/ .el-input__inner   {
    width: 200px !important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #2F4554;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .ul_li_style {
    margin-left: -40px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    padding-left: 10px;
    list-style: none;
  }
  /deep/ .el-textarea__inner {
    height: 220px;
  }
</style>
